<template>
	<el-main>
		<el-card shadow="never">
			<el-tabs tab-position="top">
				<el-tab-pane label="系统设置">
					<el-form ref="form" :model="sys" label-width="100px" style="margin-top: 20px;">
						<el-form-item label="系统名称">
							<el-input v-model="sys.name"></el-input>
						</el-form-item>
						<el-form-item label="登录地址">
							<el-input v-model="sys.logoUrl"></el-input>
						</el-form-item>
						<el-form-item label="登录开关">
							<el-switch v-model="sys.login"></el-switch>
							<div class="el-form-item-msg" data-v-b33b3cf8="">关闭后普通用户无法登录，仅允许管理员角色登录</div>
						</el-form-item>
						<el-form-item label="密码规则">
							<el-input v-model="sys.passwordRules"></el-input>
						</el-form-item>
						<el-form-item label="版权信息">
							<el-input type="textarea" :autosize="{minRows: 4}" v-model="sys.copyright"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary">保存</el-button>
						</el-form-item>
					</el-form>
				</el-tab-pane>

				<el-tab-pane label="短信配置">
					<el-form ref="form" :model="msg" label-width="100px" style="margin-top: 20px;">
						<el-form-item label="短信开关">
							<el-switch v-model="msg.open"></el-switch>
							<div class="el-form-item-msg" data-v-b33b3cf8="">关闭后用户无法收到短信，但日志中将记录</div>
						</el-form-item>
						<el-form-item label="短信渠道">
							<el-radio-group v-model="msg.type">
								<el-radio-button v-for="(item,index) in smsType" :key="item.value" :label="item.name">
									{{ item.name }}
								</el-radio-button>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="短信签名">
							<el-input v-model="msg.appKey"></el-input>
						</el-form-item>
						<el-form-item label="appKey">
							<el-input v-model="msg.appKey"></el-input>
						</el-form-item>
						<el-form-item label="secretKey">
							<el-input v-model="msg.secretKey"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary">保存</el-button>
						</el-form-item>
					</el-form>
				</el-tab-pane>

				<el-tab-pane label="扩展配置">
					<el-table :data="configList" size="large" stripe>
						<el-table-column label="#" type="index" :index="configId" width="50"></el-table-column>
						<el-table-column label="参数名称" prop="configName" min-width="200" show-overflow-tooltip="true" fixed="left">
							<template #default="scope">
								<el-input v-if="scope.row.isSet" v-model="scope.row.configName" placeholder=""></el-input>
								<span v-else>{{scope.row.configName}}</span>
							</template>
						</el-table-column>
						<el-table-column label="键名" prop="configKey" min-width="200" show-overflow-tooltip="true">
							<template #default="scope">
								<el-input v-if="scope.row.isSet" v-model="scope.row.configKey" placeholder=""></el-input>
								<span v-else>{{scope.row.configKey}}</span>
							</template>
						</el-table-column>
						<el-table-column label="键值" prop="configValue" min-width="200" show-overflow-tooltip="true">
							<template #default="scope">
								<template v-if="scope.row.isSet">
									<el-switch v-if="typeof scope.row.value==='boolean'" v-model="scope.row.isSet"></el-switch>
									<el-input v-else v-model="scope.row.configValue" placeholder=""></el-input>
								</template>
								<span v-else>{{scope.row.configValue}}</span>
							</template>
						</el-table-column>
						<el-table-column label="系统内置" prop="configType" align="center" width="150">
							<template #default="scope">
								<el-switch v-if="scope.row.isSet" v-model="scope.row.configType" active-value="Y" inactive-value="N"></el-switch>
								<span v-else>
									<DictTag :options="Dict_Yes_No" :value="scope.row.configType" ></DictTag>
								</span>
							</template>
						</el-table-column>
						<el-table-column label="备注" prop="remark" width="300" show-overflow-tooltip="true">
							<template #default="scope">
								<el-input v-if="scope.row.isSet" autosize type="textarea" v-model="scope.row.remark" placeholder=""></el-input>
								<span v-else>{{scope.row.remark}}</span>
							</template>
						</el-table-column>
						<el-table-column min-width="1"></el-table-column>
						<el-table-column label="操作" fixed="right" align="center" width="150">
							<template #default="scope">
								<el-button-group>
									<el-button @click="table_edit(scope.row, scope.$index)" text type="primary" class="button">{{scope.row.isSet?'保存':"修改"}}</el-button>
									<el-button v-if="scope.row.isSet" @click="scope.row.isSet=false" text type="primary" class="button">取消</el-button>
									<el-popconfirm v-if="!scope.row.isSet" title="确定要删除吗？" @confirm="table_del(scope.row, scope.$index)" :disabled="scope.row.configType=='Y'">
										<template #reference>
											<el-button text type="primary" :disabled="scope.row.configType=='Y'" class="button">删除</el-button>
										</template>
									</el-popconfirm>
								</el-button-group>
							</template>
						</el-table-column>
					</el-table>
					<el-button type="primary" icon="el-icon-plus" @click="table_add" style="margin-top: 20px;"></el-button>
					<el-button type="danger" icon="el-icon-refresh" @click="refreshConfig" style="margin-top: 20px;"></el-button>
				</el-tab-pane>
			</el-tabs>
		</el-card>
	</el-main>
</template>

<script>
	export default {
		name: 'system',
		data() {
			return {
				sys: {
					name: "",
					logoUrl: "",
					login: true,
					passwordRules: "^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$",
					copyright: ""
				},
				msg: {
					open: true,
					type: '阿里大于',
					appKey: "",
					secretKey: ""
				},
				smsType: [
					{
						name: "阿里大于",
						value: "alidayu"
					},
					{
						name: "亿美短信",
						value: "emei"
					}
				],
				configList: [],
				configForm: {
					configId: "",
					configName: "",
					configKey: "",
					configValue: "",
					configType: "Y",
					remark: "",
				},
				configRules: {
					configName:[
						{required: true, message: '123'}
					],
					configKey:[
						{required: true, message: '123'}
					],
					configValue:[
						{required: true, message: '123'}
					],
				},
				Dict_Yes_No: ""
			}
		},
		mounted(){
			this.getConfigList();
		},
		methods: {
			async getConfigList(){
				var res = {}
				res = await this.$API.system.config.listConfig.get({pageSize: 50});
				if (res.code == 200){
					this.configList = res.rows;
				}
				this.Dict_Yes_No = await this.Dict.get("sys_yes_no");
			},
			table_add(){
				var newRow = {
					configId: "",
					configName: "",
					configKey: "",
					configValue: "",
					configType: true,
					remark: "",
					isSet: true
				}
				this.configList.push(newRow)
			},
			async table_edit(row){
				var res = {}
				if(row.isSet){
					if (row.configId !=""){
						res = this.$API.system.config.updateConfig.put(row);
					} else {
						res = this.$API.system.config.addConfig.post(row);
					}
					if (res.code == 200){
						this.$message.success("操作成功")
						row.isSet = false;
					}
				}
				row.isSet = !row.isSet;
			},
			async table_del(row, index){
				var res = {}
				res = await this.$API.system.config.delConfig.delete(row.configId);
				if (res.code == 200){
					this.$message.success("操作成功")
					this.configList.splice(index, 1)
				} else {
					this.$alert(res.msg, "提示", {type: 'error'})
				}
			},
			refreshConfig(){
				this.$confirm('此操作将重置参数的缓存, 是否要继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					await this.$API.system.config.refreshCache.delete();
					this.$message.success("操作成功");
				}).catch(() => {    
				});
			}
		}
	}
</script>

<style>
</style>
